<template>
  <div
    class="home-root">
    <w-nav-bar
      title="主页"
      :back="false"
      :more-home="false">
      <span slot="right">
        <message-icon
          width="20"
          height="20"
          fill="#fff"
          @click="messageClick"/>
        <badge
          v-if="massageUnreadCount"
          class="massage-badge"
          :text="massageUnreadCount"/>
      </span>
    </w-nav-bar>
    <w-banner/>
    <div class="w-clock">
      <w-clock
        :w="680"
        :h="120"/>
    </div>
    <home-links/>
    <w-study-time-line/>
  </div>
</template>

<script>
import WBanner from './banner'
import WClock from '@/components/global/clock/index'
import HomeLinks from './homeLinks'
import WStudyTimeLine from './studyTimeLine'
import MessageIcon from '@/icons/message.svg'
import { Badge } from 'vux'
import { mapGetters } from 'vuex'
export default {
  name: 'HomeRoot',
  components: {
    WBanner,
    WClock,
    HomeLinks,
    WStudyTimeLine,
    MessageIcon,
    Badge
  },
  computed: {
    ...mapGetters(['massageUnreadCount'])
  },
  methods: {
    messageClick() {
      this.$router.push({ name: 'HomeMessage' })
    }
  }
}
</script>

<style lang="scss" scoped>
.home-root {
  .w-clock {
    padding: 20px 20px 0 20px;
  }
  .massage-badge{
    position: relative;
    top: -15px;
  }
}
</style>
